<template>
  <div class="students-page">
    <div>
      <el-button type="primary" :icon="Plus" style="margin-bottom: 10px;" @click="addClassAction">新增</el-button>
       <el-table :data="tableData" border  style="width: 100%" :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666', fontWeight: 'bold', textAlign: 'center'}">
        <el-table-column prop="name" label="班级名称" align="center"/>
        <el-table-column prop="head_teacher_id" label="班主任"  align="center">
          <template #default="scope">
            <span>{{ getTeacherName(scope.row.head_teacher_id)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="140px">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

     <el-dialog
        v-model="dialogVisible"
        title="新增班级"
        width="400"
      >
         <el-form
            ref="ruleFormRef"
            :model="formInfo"
            :rules="rules"
            label-width="auto"
          >
            <el-form-item label="班级名称" prop="name">
              <el-input v-model="formInfo.name" placeholder="班级名称" />
            </el-form-item>
            <el-form-item label="班主任" prop="head_teacher_id">
              <el-select v-model="formInfo.head_teacher_id" placeholder="请选择">
                <el-option v-for="item in teacherList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-form>
          <el-form-item>
            <el-button style="width: 100%;" type="primary" @click="submitForm(ruleFormRef)">
               {{ isAdd ? '新增' : '修改'}}
            </el-button>
          </el-form-item>
      </el-dialog>
  </div>
</template>

<script setup>
import { addClass, deleteClass, getAllClass, getAllTeacher, updateClass } from '@/api';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';

const tableData = ref([
  {
    name: '班级',
    head_teacher_id: '0'
  }
])
const teacherList = ref([])
const allTeacherList = ref([])

// 获取所有老师
const getAllTeacherInfo = () => {
  getAllTeacher().then(res => {
    allTeacherList.value = res
    // 过滤掉非班主任
    teacherList.value = res.filter(item => item.is_head_teacher === 1)
  })
}

getAllTeacherInfo()

// 获取所有班级
const getTableData = () => {
  getAllClass().then(res => {
    tableData.value = res
  })
}

getTableData()

const getTeacherName =  (head_teacher_id) => {
  // getTeacherById(id).then(res => {
  //   console.log(res);
  // })
  return allTeacherList.value.find(item => item.teacher_id === head_teacher_id)?.name || '未知'
}

// name,teacher_id,gender('男'，'女'),phone,is_head_teacher('0','1')
/************** 新增 ****************/
const dialogVisible = ref(false)
const ruleFormRef = ref(null)
const isAdd = ref(true)
const formInfo = ref({
  name: '',
  head_teacher_id: '',
})

const rules = ref({
  name: [
    { required: true, message: '请输入班级名称', trigger: 'blur' },
  ],
  head_teacher_id:[
    { required: true, message: '请选择班主任', trigger: 'change' },
  ]
})

const addClassAction = () => {
  isAdd.value = true
  dialogVisible.value = true
  ruleFormRef.value.resetFields()
}
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if (isAdd.value) {
        addTeacherInfo()
      } else {
        updateTeacherInfo()
      }
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const addTeacherInfo = () => {
  addClass(formInfo.value).then(res => {
    console.log(res);
    ElMessage.success('新增成功')
    getTableData()
    ruleFormRef.value.resetFields()
    dialogVisible.value = false
  })
}

/************** 编辑 ****************/

const handleEdit = (row) => {
  isAdd.value = false
  formInfo.value = row
  dialogVisible.value = true
}

const updateTeacherInfo = () => {
  updateClass(formInfo.value.id, formInfo.value).then(res => {
    console.log(res);
    ElMessage.success('修改成功')
    getTableData()
    ruleFormRef.value.resetFields()
    dialogVisible.value = false
    isAdd.value = true
  })
}

/************** 删除 ****************/
const handleDelete = (row) => {
  console.log(row);
  deleteClass(row.id).then(res => {
    console.log(res);
    ElMessage.success('删除成功')
    getTableData()
  })
}
</script>

<style lang="scss" scoped>

</style>